<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<view class="statu-space" :style="{ height: statusBarHeight + 'px' }"></view>
		<refresh :isTop="isTop" ref="refresh" :needVibrate="true" @isRefresh="isRefresh"></refresh>
		<view class="marginBox" style="height: 94rpx;">边距盒子</view>
		<!-- #ifdef MP-KUAISHOU -->
		<view style="width: 100vw;height:70rpx ;display: flex;align-items: center;justify-content: center;">
			<view class="searchBox">
				<div style="display: flex;align-items: center;justify-content: flex-start;width: 90%;">
					<image class="searchImg" style="width: 45rpx;height: 45rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_search.png"></image>
					<input v-model="keyWord[currentTab]" @input="isInput" class="input999" placeholder="输入关键词" />
				</div>
				<image v-if="keyWord[currentTab]" @click="isClear" style="width: 45rpx;height: 45rpx;margin-right: 20rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_searchClose.png"></image>
			</view>
			<!-- <view @click="isSearch" class="searchBtn">搜索</view> -->
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view style="width: 100vw;height:70rpx ;display: flex;align-items: center;justify-content: center;">
			<view class="searchBox">
				<div style="display: flex;align-items: center;justify-content: flex-start;width: 90%;">
					<image class="searchImg" style="width: 45rpx;height: 45rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_search.png"></image>
					<input v-model="keyWord[currentTab]" class="uni-input" confirm-type="search"  @input="isInput" placeholder="输入关键词" />
				</div>
				<image v-if="keyWord[currentTab]" @click="isClear" style="width: 45rpx;height: 45rpx;margin-right: 20rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_searchClose.png"></image>
			</view>
			<!-- <view @click="isSearch" class="searchBtn">搜索</view> -->
		</view>
		<!-- #endif -->
		<navTab v-if="tabTitle" :navType="3" ref="navTab" style="margin-top: 20rpx;margin-bottom: 20rpx;" @toTop="toTop" :tabTitle="tabTitle" @changeTab="changeTab"></navTab>
		<swiper :style="{ height: screenHeightShow }" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem, listIndex) in list" :key="listIndex">
				<scroll-view @scroll="isScroll" style="height: 100%;" scroll-y="true" @scrolltolower="lower1">
					<view class="content" v-if="listItem.length > 0 && hasLoad[listIndex]">
						<view v-for="(cardItem, cardIndex) in listItem" @click="toDetail(cardItem)" style="margin-bottom: 10rpx;" class="imgItem">
							<image lazy-load class="imgBox" :src="cardItem.coverImgUrl"></image>
							<view style="text-align: center;color: #333333;font-size: 30rpx;margin-top: 15rpx;" class="clamp">{{ cardItem.title }}</view>
							<view style="text-align: center;color: #B3B3B3;font-size: 26rpx;margin-top: 2rpx;">
								{{ cardItem.finish ? '已完结共' + cardItem.updateOfEpisodes + '集' : '更新至第' + cardItem.updateOfEpisodes + '集' }}
							</view>
						</view>
						<view v-if="listItem.length % 3 == 2" style="width:230rpx;height: 342rpx;"></view>
					</view>
					<view class="loadMoreBox" @click.stop="lower1" v-if="listItem.length > 3 && hasLoad[listIndex]">
						<loadMore @loadMore="lower1">
							<view class="loadMore">{{ noMore[listIndex] == 1 ? '到底啦，别再拉了～' : noMore[listIndex] == 0 ? '加载更多' : '努力加载中' }}</view>
						</loadMore>
					</view>
					<view class="noCard" v-if="listItem.length === 0 && !hasLoad[listIndex]">加载中</view>
					<noData v-if="listItem.length === 0 && hasLoad[listIndex]"></noData>
					<view class="statu-space" :style="{ height: statusBarHeight + 'px' }"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import refresh from '../../../components/refresh.vue';
import navTab from '../../../components/navTab.vue';
const util = require('../../../util/util.js');
export default {
	components: { navTab, refresh },
	data() {
		return {
			keyWord: [],
			screenHeightShow: 667,
			statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'] || 20,
			list: [],
			hasLoad: [],
			noMore: [],
			pages: [],
			currentTab: 0,
			tabTitle: '',
			isTop: true
		};
	},
	computed: {},
	onShow() {},
	created() {
		console.log('darenChoose');
		this.initData();
	},
	methods: {
		isClear() {
			let tempKey = JSON.parse(JSON.stringify(this.keyWord));
			tempKey[this.currentTab] = '';
			this.keyWord = JSON.parse(JSON.stringify(tempKey));
			this.isSearch();
			this.$forceUpdate();
		},
		isInput: util.debounce(function(e) {
			this.$forceUpdate();
			this.isSearch();
		}, 600),
		isSearch() {
			this.getList('refresh');
		},
		async initData() {
			//#ifdef MP-KUAISHOU
			let res0 = await this.zwyRequest({
				url: `/cdp/index/compilations/v2/kuai_shou/my_creation?pageNum=${1}`
			});
			let res1 = await this.zwyRequest({
				url: `/cdp/index/compilations/kuai_shou/my_spread?pageNum=${1}`
			});
			//#endif
			//#ifdef MP-TOUTIAO
			let res0 = await this.zwyRequest({
				url: `/cdp/index/compilations/v2/tik_tok/my_creation?pageNum=${1}`
			});
			let res1 = await this.zwyRequest({
				url: `/cdp/index/compilations/tik_tok/my_spread?pageNum=${1}`
			});
			//#endif
			
			let tempTitle = [];
			Promise.all([res0, res1]).then(res2 => {
				console.log('res2', res2);
				if (res2[0].havePermission) tempTitle.push('作品列表');
				if (res2[1].havePermission) tempTitle.push('推广列表');
				this.tabTitle = tempTitle;
				console.log(tempTitle)
				let tempObj = {
					pages: 1,
					list: [],
					noMore: 0,
					hasLoad: false,
					keyWord: ''
				};
				for (let key in tempObj) {
					this[key] = new Array(this.tabTitle.length).fill(tempObj[key]);
				}
				this.getList('refresh');
			}).catch(res=>{
				this.getList('refresh');
			})
		},
		toSetPage() {
			uni.navigateTo({
				url: '../setPage/setPage'
			});
		},
		isScroll(e) {
			if (e.detail.scrollTop <= 40) this.isTop = true;
			else this.isTop = false;
		},
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e) {
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh() {
			this.getList('refresh');
		},
		toDetail(item) {
			console.log('item', item);
			let tempUrl = `../video/video?fakeId=${item.fakeId || item.compilationsFakeId}&compilationId=${item.compilationId || item.compilationsId}`;
			if (item.sequence) tempUrl += `&enterSequence=${item.sequence}`;
			this.zwyRouter(`../video/video?fakeId=${item.fakeId || item.compilationsFakeId}&compilationId=${item.compilationId || item.compilationsId}`);
		},
		lower1: util.throttle(function(e) {
			this.getList('loadMore');
		}, 360),
		swiperTab:  async function(e) {
			var index = e.detail.current; //获取索引
			await this.$nextTick()
			this.$refs.navTab && this.$refs.navTab.longClick(index);
			if (this.list[index].length === 0) this.getList();
		},
		getList: util.throttle(function(type = 'refresh') {
			let tempIndex = this.currentTab;
			let tempPageNum = this.pages[tempIndex];
			if (type == 'refresh') {
				tempPageNum = 1;
				// this.hasLoad[tempIndex] = false;
				this.noMore[tempIndex] = 0;
			}
			if (this.noMore[tempIndex] != 0) {
				return;
			}
			this.noMore[tempIndex] = 2;
			this.noMore = JSON.parse(JSON.stringify(this.noMore));
			let postData = {};
			let tempUrl = '';
			//#ifdef MP-KUAISHOU
			if (this.tabTitle[tempIndex] == '作品列表') {
				postData['pageNum'] = tempPageNum;
				tempUrl = `/cdp/index/compilations/v2/kuai_shou/my_creation?pageNum=${tempPageNum}&compilationsTitle=${this.keyWord[tempIndex]}`;
			} else if (this.tabTitle[tempIndex] == '推广列表') {
				tempUrl = `/cdp/index/compilations/kuai_shou/my_spread?pageNum=${tempPageNum}&compilationsTitle=${this.keyWord[tempIndex]}`;
			}else{
				tempUrl = `/cdp/index/compilations/kuai_shou/my_creation?pageNum=${tempPageNum}&compilationsTitle=${this.keyWord[tempIndex]}`;
			}
			//#endif
			//#ifdef MP-TOUTIAO
			if (this.tabTitle[tempIndex] == '作品列表') {
				postData['pageNum'] = tempPageNum;
				tempUrl = `/cdp/index/compilations/v2/tik_tok/my_creation?pageNum=${tempPageNum}&compilationsTitle=${this.keyWord[tempIndex]}`;
			} else if (this.tabTitle[tempIndex] == '推广列表') {
				tempUrl = `/cdp/index/compilations/tik_tok/my_spread?pageNum=${tempPageNum}&compilationsTitle=${this.keyWord[tempIndex]}`;
			}else{
				tempUrl = `/cdp/index/compilations/tik_tok/my_creation?pageNum=${tempPageNum}&compilationsTitle=${this.keyWord[tempIndex]}`;
			}
			//#endif
			

			this.zwyRequest({
				url: tempUrl,
				data: postData
			}).then(res => {
				console.log('getList', res);
				let tempRes = res.list ? res.list : res;
				let check = Array.isArray(tempRes);
				if (!check) {
					this.noMore[tempIndex] = 0;
					this.pages[tempIndex]--;
					return;
				}
				if (tempRes && tempIndex == 2) {
					tempRes = tempRes.map(item => {
						return { ...item, ...item['episodicDrama'] };
					});
				}
				let tempList = this.list;

				if (type == 'refresh') {
					tempList[tempIndex] = tempRes;
					tempPageNum = 2;
				} else {
					tempList[tempIndex] = tempList[tempIndex].concat(tempRes);
					tempPageNum++;
				}
				console.log('tempList', tempList);
				this.noMore[tempIndex] = tempRes.length === 0 ? 1 : 0;
				this.pages[tempIndex] = tempPageNum;
				this.hasLoad[tempIndex] = true;
				this.hasLoad = JSON.parse(JSON.stringify(this.hasLoad));
				this.list = JSON.parse(JSON.stringify(tempList));
				this.noMore = JSON.parse(JSON.stringify(this.noMore));
				this.$refs.refresh.endAfter(); //刷新结束调用
				this.$forceUpdate();
			});
		}, 300),
		changeTab(index) {
			this.currentTab = index;
			console.log('index', index);
		},
		toTest() {
			console.log('toTest');
			uni.navigateTo({
				url: '../toTest/toTest'
			});
		},
		showCz() {
			uni.hideTabBar();
			this.showMoney = true;
		},
		moneyClose() {
			uni.showTabBar();
			this.showMoney = false;
		},
		czSuccess() {
			uni.showTabBar();
			this.showMoney = false;
			this.getBalance();
		},
		getBalance() {
			this.zwyRequest({
				header: {
					'content-type': 'application/json;charset=UTF-8'
				},
				url: '/wealth/api/balance/user_balance'
			}).then(res => {
				console.log('getBalance', res);
				if (res) this.balance = res;
			});
		},
		postLogin: util.throttle(async function() {
			if (this.isLogin) return;

			//#ifdef MP-KUAISHOU
			uni.getUserInfo({
				success: res => {
					console.log('postLogin', res);
					this.updateInfo(res.userInfo.nickName, res.userInfo.avatarUrl);
				}
			});
			//#endif
			//#ifdef MP-TOUTIAO
			uni.getUserProfile({
				success: res => {
					console.log('getUserProfile 调用成功：', res.userInfo);
					this.updateInfo(res.userInfo.nickName, res.userInfo.avatarUrl);
				},
				fail: res => {
					console.log('getUserProfile 调用失败', res);
				}
			});
			//#endif
		}, 2000),
		updateInfo(nickName, avatarUrl) {
			uni.showLoading({
				title: '登录中',
				mask: true
			});
			// this.userInfo = res.userInfo;
			let postUrl = '/user/login_user/update_kuaishou_user_info';
			
			//#ifdef MP-TOUTIAO
				postUrl = '/user/login_user/update_douyin_user_info'
			//#endif
			
			this.zwyRequest({
				url: postUrl,
				method: 'POST',
				data: {
					nickName: nickName,
					iconUrl: avatarUrl
				}
			}).then(resUpdate => {
				console.log('postLogin', resUpdate);
				this.zwyLogin().then(resLogin => {
					console.log('zwyLogin', resLogin);
					setTimeout(() => {
						uni.hideLoading();
						this.userInfo = uni.getStorageSync('userInfo') || {};
						this.isLogin = true;
						uni.setStorageSync('alreadyAuthLogin', true);
						this.getBalance();
					}, 500);
				});
			});
		},
		loginout() {
			console.log('loginout');
			this.isLogin = false;
			uni.setStorageSync('alreadyAuthLogin', false);
			this.userInfo = {};
		},
		isCopy() {
			uni.setClipboardData({
				data: 'aiyufeimmmm',
				success: function() {}
			});
		}
	},
	onReady() {
		this.screenHeightShow = `calc(${uni.getSystemInfoSync()['screenHeight'] || 667}px  - 90rpx - 94rpx - 20rpx - 100rpx - ${this.statusBarHeight}px)`;
	}
};
</script>

<style lang="scss">
.input999 {
	width: 80%;
}
.searchBtn {
	margin-left: 14rpx;
	color: #909499;
	font-size: 28rpx;
}
.imgItem {
	.imgDesTitle {
		flex: 1;
		overflow: hidden;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.imgLabel {
		margin-right: 5rpx;
		font-size: 21rpx;
		color: white;
		width: 55rpx;
		height: 29rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
	}
	.labelColor0 {
		background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
	}
	.labelColor2 {
		background: linear-gradient(225deg, rgba(155, 226, 91, 1) 0%, rgba(99, 171, 21, 1) 100%);
	}
	.labelColor1 {
		background: linear-gradient(225deg, rgb(250, 132, 162) 0%, rgb(255, 129, 160) 30%);
	}
	.labelColor3 {
		background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
	}
	.labelColor4 {
		background: linear-gradient(225deg, rgb(11, 185, 234) 0%, rgb(72, 211, 250) 100%);
	}
	.labelColor5 {
		background: linear-gradient(225deg, rgb(220, 124, 253) 0%, rgb(248, 83, 246) 100%);
	}
	.imgDesBox {
		box-sizing: border-box;
		font-size: 26rpx;
		color: #474747;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 58rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 7rpx;
		box-sizing: border-box;
	}
	.imgBox {
		border-radius: 13rpx;
		position: relative;
		width: 220rpx;
		height: 330rpx;
	}
	.vipImg {
		width: 66rpx;
		height: 36rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;
	}
	width: 220rpx;
	box-sizing: border-box;
	display: flex;
	position: relative;
	margin-top: 19rpx;
	flex-direction: column;
	overflow: hidden;
}
.searchImg {
	margin: auto 9rpx auto 24rpx;
}
.searchBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 91vw;
	height: 70rpx;
	background: #f0f0f0;
	border-radius: 35rpx;
}
.sequence {
	text-align: center;
	line-height: 59rpx;
	display: -webkit-box;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	bottom: 0;
	width: 92%;
	padding: 0 4%;
	margin: auto;
	left: 0;
	right: 0;
	height: 59rpx;
	z-index: 88;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 28rpx;
}

.seq {
	text-align: center;
	line-height: 52rpx;
	width: 174rpx;
	height: 52rpx;
	color: #fd6f9f;
	font-size: 26rpx;
	border-radius: 26rpx;
	margin-bottom: 30rpx;
	margin-top: 16rpx;
	border: 1rpx solid #e1e1e1;
}
.noCard {
	width: 90vw;
	height: 400rpx;
	margin: auto;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
}
.content {
	display: flex;
	flex-wrap: wrap;
	width: 100vw;
	padding: 0 2%;
	box-sizing: border-box;
	justify-content: space-between;
}
.loadMore {
	background-color: #ffffff;
	padding: 0 23rpx;
	position: relative;
	z-index: 11;
}
.loadMoreBox::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 90vw;
	height: 2rpx;
	background-color: #d9d9d9;
	margin: auto;
}
.loadMoreBox {
	position: relative;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	font-size: 22rpx;
	color: #c3c3c3;
}
.imgBox {
	overflow: hidden;
	position: relative;
	width: 230rpx;
	border-radius: 13rpx;
	height: 342rpx;
}
.wealthBox {
	.czBtn {
		font-size: 28rpx;
		width: 209rpx;
		height: 67rpx;
		background: linear-gradient(339deg, #f36d86 0%, #ff70a2 100%);
		border-radius: 34rpx;
		line-height: 67rpx;
		color: white;
		text-align: center;
	}
	width: 90vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.wealthItem {
		.wealthItemBottom {
			color: #333333;
			font-size: 28rpx;
		}
		.wealthItemTop {
			font-size: 28rpx;
			color: #999999;
		}
		justify-content: center;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
}
.version {
	width: 100vw;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #ccc;
	font-weight: bold;
	position: absolute;
	left: 0;
	bottom: 30rpx;
}
.userBoxLeft {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.navTop {
	position: fixed;
	top: 0;
	left: 0;
}
.lineLeft {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 50rpx;
}
.line {
	border-bottom: 1rpx solid rgba(221, 221, 221, 1);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	line-height: 80rpx;
}
.container {
	flex-direction: column;
	height: 100%;
}
.btn-cz {
	width: 180rpx;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	padding: 0 30rpx;
	background: linear-gradient(to right, #ffff82, #ffa631);
	border-radius: 36rpx;
	font-size: 28rpx;
	color: #6e4c20;
}
.userBox {
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.moneyText {
		padding-left: 10rpx;
		margin-top: 12rpx;
		font-size: 30rpx;
		color: #333333;
	}
	.loginBtn {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		.loginText {
			font-weight: bold;
			font-size: 36rpx;
			color: black;
		}
	}
	.userImg {
		margin-right: 22rpx;
		width: 122rpx;
		height: 122rpx;
		border-radius: 50%;
	}
}
.container999 {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.topBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: 320rpx;
	background-size: 100% 120%;
}
</style>
